<!-- 限时秒杀/每日上新组件 -->
<template>
  <view class="limit-area limit-round-area">
    <limit-title
      ref="listTitleRef"
      :title="props.limitTitle"
      size="28"
      fwt="600"
      iconColor="#fb3c2a"
      rightColor="#fb3c2a"
      @goto="toLimit()"
    />
    <scroll-view class="margin-top" scroll-x>
      <view class="dflex padding-bottom-xs">
        <view
          class="item"
          v-for="(item, index) in props.limitDatas"
          :key="index"
          @click="togoods(item)"
        >
          <image class="border-radius-xs" mode="aspectFill" :lazy-load="true" :src="item.img" />
          <!-- <text class="title clamp padding-bottom-xs">{{ item.name }}</text> -->
          <text class="price">{{ item.price / 100 }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  // import config from '@/utils/config';
  import { url_params } from '@/utils';
  import LimitTitle from '@/components/limit/limit-title.vue';
  import { LimitModel } from '@/services/model/homeModel';
  import { router } from '@/utils/router';

  // 注册组件
  const listTitleRef = ref();

  const props = defineProps({
    limitDatas: {
      type: Array<LimitModel>,
      default: () => [],
    },
    limitTitle: {
      type: String,
      default: () => '',
    },
    limitType: {
      type: String,
      default: () => '0',
    },
  });

  const toLimit = () => {
    if (props.limitType === '0') {
      router.push('pages/limit/limit-list' + url_params({}));
    }
  };

  const togoods = (goods: LimitModel) => {};
</script>

<style lang="scss">
  .limit-area {
    min-height: 100px;
    margin: 0rpx 20rpx;
    background: #fff;
    .item {
      padding: 0rpx 12rpx 0rpx 12rpx;

      image {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
  }
</style>
